<template>
  <view class="bg">

    <view class="loan-item">
      <view class="loan-item-head">
        <view class="loan-item-head-left">
          <view class="loan-item-logo">
            <image :src="prodInfo.corporationImgUrl"></image>
          </view>
          <view class="loan-item-title">
            <text class="loan-item-title-text">{{ prodInfo.productName }}</text>
            <text class="loan-item-title-desc">{{ prodInfo.productSlogan }}</text>
          </view>
        </view>
        <view class="loan-item-head-right">
          {{prodInfo.productCategoryName}} | {{ prodInfo.productSubCategoryName }}
        </view>

      </view>
      <view class="loan-item-content">
        <view class="loan-item-quota">
          <text class="loan-item-quota-num">{{ prodInfo.maxQuota }}</text>
          <text>万</text>
        </view>
        <view class="loan-item-detail">
          <text>年化利率：{{prodInfo.rateRange}}</text>
          <text>还款方式：{{prodInfo.newRepaymentType}}</text>
          <text>贷款期限：{{ prodInfo.maxPeriods }}期</text>
        </view>
      </view>
    </view>

    <view class="detail-content">
      <u-tabs :list="list" @click="click"></u-tabs>
      <view v-show="activeTabs===0">
        <view class="detail-module1">
          <text>准入要求</text>
          <view class="detail-module2">征信要求：</view>
          <view class="detail-module2">资质要求：{{ prodInfo.applyQualification }}</view>
        </view>
        <view class="detail-module1">
          <text>审批信息</text>
          <view class="detail-module2">放款时效：{{ prodInfo.productFlow }}</view>
          <view class="detail-module2">周末是否审批：</view>
        </view>
        <view class="detail-module1">
          <text>面签要求</text>
          <view class="detail-module2">是否需要面签：{{ prodInfo.needFaceSign === 'YES' ? '是' : '否' }}</view>
          <view class="detail-module2">面签材料要求：{{ prodInfo.needMaterial }}</view>
        </view>
        <view class="detail-module1">
          <text>其他备注</text>
          <view class="detail-module2">{{ prodInfo.supplement }}</view>
        </view>

      </view>
      <view class="detail-area" v-show="activeTabs===1">
        <view>北京市</view>
        <view>天津市</view>
        <view>河北省</view>
        <view>山西省</view>
        <view>内蒙古自治区</view>
        <view>辽宁省</view>
        <view>吉林省</view>
        <view>黑龙江省</view>
        <view>上海市</view>
        <view>江苏省</view>
        <view>浙江省</view>
        <view>安徽省</view>
        <view>福建省</view>
        <view>江西省</view>
        <view>山东省</view>
        <view>河南省</view>
        <view>湖北省</view>
        <view>湖南省</view>
        <view>广东省</view>
        <view>广西壮族自治区</view>
        <view>海南省</view>
        <view>重庆市</view>
        <view>四川省</view>
        <view>贵州省</view>
        <view>云南省</view>
        <view>西藏自治区</view>
        <view>陕西省</view>
        <view>甘肃省</view>
        <view>青海省</view>
        <view>宁夏回族自治区</view>
        <view>新疆维吾尔自治区</view>
      </view>
    </view>

    <view class="share-module">
      <button @click="sharProduct" >分享产品</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [{name: '办理指南'}, {name: '可申请区域'}],
      activeTabs: 0,
      prodInfo: {
      }
    }
  },
  onLoad(option) {
    const eventChannel = this.getOpenerEventChannel();
    let that = this
    eventChannel.on('getItem', function (data) {
      that.prodInfo = data;
      console.log(data)
    })
  },
  methods: {
    toCardPage() {
      uni.navigateTo({url: '/pages/index/product/CardList'})
    },
    click({index, name}) {
      this.activeTabs = index
    },
    sharProduct() {
      uni.navigateTo({
          url: "/pages/index/product/ShareProduct",
          success: (res) => {
            res.eventChannel.emit("accepShareData", this.prodInfo);
          },
        });
    }
  }
}
</script>

<style lang="scss" scoped>

.bg {
  background-color: #f7f7f7;
  height: 100%;
}




.loan-item {
  height: 120px;
  background-color: #FFFFFF;
  margin: 15px 15px 15px 15px;
  .loan-item-logo {
    uni-image {
      width: 45px;
      height: 45px;
    }
  }

  .loan-item-head {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 3px;
    margin-left: 6px;

    .loan-item-head-left {
      display: flex;
    }

    .loan-item-head-right {
      color: #f17a7a;
      padding-right: 12px;
    }
  }
  .loan-item-title-text {
    font-weight: bold;
    color: #000000;
  }

  .loan-item-title-desc {
    background-color: #fef3e4;
    color: #f08163;
  }

  .loan-item-title {
    display: flex;
    flex-direction: column;
  }


  .loan-item-content {
    display: flex;

    .loan-item-quota {
      color: #f05f5d;
      display: flex;
      margin-left: 20px;
      margin-right: 10px;
      flex-direction: row;
      align-items: flex-end;
    }
  }

  .loan-item-detail {
    font-size: 14px;
    color: #aaaaaa;
    display: flex;
    flex-direction: column;
  }

  .loan-item-quota-num {
    font-size: 40px;
    font-weight: bold;
  }
}

.detail-content {
  height: auto;
  background-color: #FFFFFF;
  margin: 15px 15px 15px 15px;
  padding: 10px 20px;


  .detail-module1 {
    font-weight: bold;
    padding: 10px 8px 25px 8px;
    border-bottom: solid 1px #ccc;
  }

  .detail-module2 {
    font-weight: initial;
  }
  .detail-area{
    uni-view{
      font-size: 14px;
      padding-top: 2px;
      padding-bottom: 2px;
      font-weight: bold;
      margin-left: 20px;
    }
  }
}



.share-module {
  margin-top: 20px;
  margin-bottom: 20px;
  uni-button {
    width: 200px;
    color: #f05f5d;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #f05f5d;
  }
}


</style>
